<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import post from '../../lib/post'//引入封装请求
import { Location } from "@element-plus/icons-vue";
import FormItemText from '@/components/FormItemText.vue'; // 引入封装的组件
import MapModal from './MapModal.vue'; // 地图弹窗



// 数据
const dialogVisible = ref(false)
const emit = defineEmits(['refreshList']); // defineEmits返回一个方法用来发送事件
const type = ref('')   //储存弹窗的类型
let record: any; // 保存一个临时变量
const form: Ref<{ name: string; address: string; concat: string }> = ref({
    name: '',
    address: '',
    concat: '',
})
const mapRef = ref()  //地图弹窗的引用


const fromRef: any = ref();


// 函数
const showCreate = () => {
    console.log(form.value);
    form.value.name = ''
    form.value.address = ''
    form.value.concat = ''
    type.value = 'create'
    dialogVisible.value = true;
}
const showModify = (index: number, row: any) => {
    // console.log();
    record = row
    form.value.name = row.name,
        form.value.address = row.address
    form.value.concat = row.concat
    type.value = 'modify'
    dialogVisible.value = true;
}

const submitCreate = async () => {


    // 提交新增

    // 验证
    await fromRef.value.validate(); // 如果验证失败会抛出异常

    const data: any = await post('/create/station', {
        ...form.value,
        $uniq: 'name'
    })
    if (!data.success) {
        return ElMessageBox.alert(data.message)
    }
    emit('refreshList')

    form.value.name = ''
    form.value.address = ''
    form.value.concat = ''

    dialogVisible.value = false
}

const submitModify = async () => {

    // 验证
    await fromRef.value.validate(); // 如果验证失败会抛出异常
    console.log(form);

    // 发起请求
    const data: any = await post("/modify/station", { // 一般使用扩展符添加属性
        id: record.id,
        ...(form.value),
    }); // 直接提交form

    // console.log('=================data', data);
    if (!data.success) { // 错误处理
        // return alert(data.message);
        return ElMessageBox.alert(data.message);
    }
    // 通知父组件刷新列表
    emit('refreshList');
    dialogVisible.value = false; // 关闭弹窗
}

// 上传头像
// const onUploadSuccess = (res: any) => {
//     const url = 'http://localhost:5188' + res.result.url
//     form.head = url
// }
const showMap = () => { // 显示地图
    // console.log(mapRef.value);

    mapRef.value.show2(form);
}
const onAddress = (address: string) => { // 监听到获取地址
    console.log('132123132123');
    // console.log(address);

    form.value.address = address;

}

defineExpose({ showCreate, showModify })




</script>



<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="type === 'create' ? '新增角色' : '修改角色'" width="40%">
            <el-form ref="fromRef" :model="form" label-width="120px">
                <!-- 自提点名称 -->
                <FormItemText :form="form" type="name" label="自提点名称" prop="name" required rule="organizationname" />



                <!-- 自提点地址 -->
                <FormItemText :form="form" type="address" label="自提点地址" prop="address" required />

                <!-- 自提点联系方式 -->
                <FormItemText :form="form" type="concat" label="联系方式" prop="concat" required rule="phone" />



                <!-- 自提点地址 -->
                <FormItemText :form="form" label="地址" prop="address" required>
                    <template #append>
                        <el-button :icon="Location" @click="showMap()" />
                    </template>
                </FormItemText>


                <!-- 组织类型
                <el-form-item label="组织类型" prop="type" :rules="[
                    { required: true, message: '请选择组织类型' }]">
                    <el-radio-group v-model="form.type">
                        <el-radio label="小店" />
                        <el-radio label="超市" />
                        <el-radio label="工厂" />
                        <el-radio label="学校" />
                    </el-radio-group>
                </el-form-item>
 -->



                <!-- 选择权限 -->
                <!-- <el-form-item label="选择技能" prop="authority" :rules="[
                    { required: true, message: '请选择权限' }]">
                    <el-checkbox-group v-model="form.authority">
                        <el-checkbox label="查看人员" :value=1 name="authority" />
                        <el-checkbox label="管理人员" :value=2 name="authority" />
                        <el-checkbox label="查看角色" :value=3 name="authority" />
                        <el-checkbox label="管理角色" :value=1 name="authority" />
                        <el-checkbox label="查看组织" :value=1 name="authority" />
                        <el-checkbox label="管理组织" :value=1 name="authority" />
                        <el-checkbox label="查看商品" :value=1 name="authority" />
                        <el-checkbox label="管理商品" :value=1 name="authority" />
                        <el-checkbox label="查看自提点" :value=1 name="authority" />
                        <el-checkbox label="管理自提点" :value=1 name="authority" />
                    </el-checkbox-group>
                </el-form-item> -->



                <!-- 文本域 -->
                <!-- <el-form-item label="组织描述">
                    <el-input v-model="form.description" type="textarea" />
                </el-form-item> -->



            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false; 
                    form.name = ''
                    form.address = ''
                    form.concat = ''
                    ">关闭</el-button>
                    <el-button v-if="type === 'create'" type="primary" @click="submitCreate()">
                        确认
                    </el-button>
                    <el-button v-else type="primary" @click="submitModify()">
                        确认
                    </el-button>
                </span>
            </template>
            <!-- <MapModal ref="mapRef"></MapModal> -->
        </el-dialog>
    </div>
    <MapModal ref="mapRef" @onAddress="onAddress"></MapModal>
</template>


<style scoped>
.upload {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d3d3d3;
}

.upload-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
}

.head {
    width: 100px;
    height: 100px;
}
</style>